<template>
  <div class="buycar">
    <el-row>
      <el-col :span="18">
        <el-table
          :data="carshop"
          style="width: 100%"
        >
          <el-table-column
            header-align="center"
            align="center"
            label=""
            width="30px"
          >
            <template slot-scope="scope">
              <el-checkbox-group v-model="select">
                <el-checkbox :label="scope.row.id">{{''}}</el-checkbox>
              </el-checkbox-group>
            </template>
          </el-table-column>
          <el-table-column
            label="产品图片"
            width="110px"
          >
            <template slot-scope="scope">
              <img
                :src="'http://139.198.178.82:9090/Shopping/'+scope.row.product.defaultImg"
                style="width:70px;height:70px"
              >
            </template>
          </el-table-column>
          <el-table-column
            label="产品名称"
            width="500px"
          >
            <template slot-scope="scope">
              {{scope.row.product.name}}
              <el-tag
                type="warning"
                v-if="scope.row.jsonData!=null"
              >{{scope.row.jsonData}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="数量"
            width="width"
          >
            <template slot-scope="scope">
              <el-input-number
                v-model="scope.row.quantity"
                :min="1"
                :max="10"
              ></el-input-number> * {{scope.row.product.shopPrice/100}}元
            </template>
          </el-table-column>
          <el-table-column
            label="小计"
            width="130px"
          >
            <template slot-scope="scope">
              {{scope.row.product.shopPrice/100 * scope.row.quantity}}
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="100px"
          >
            <template slot-scope="scope">
              <el-button
                type="danger"
                plain
                @click="delitem(scope.row.id)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="6">
        <p>商品总价：{{zongjia}}</p>
        <p>合计金额：{{zongjia}}</p>
        <p>
          <el-button
            type="success"
            @click="pay"
          >立即支付</el-button>
        </p>
        <p>
          <el-button
            type="primary"
            @click="delselect"
          >删除所选</el-button>
          <el-button
            type="danger"
            @click="cleancar"
          >清空购物车</el-button>
          <el-button
            type="primary"
            @click="inputChange"
          >更新购物车</el-button>
        </p>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "buycar",
  data() {
    return {
      carshop: [],
      quantity: "",
      zongjia: 0,
      select: [],
    };
  },
  methods: {
    getbuycar() {
      this.$post(this.url + "/cart/selectCart", {
        userId: this.$store.state.user.id,
      }).then((res) => {
        this.carshop = res.data.orderItemList;
        // this.zongjia = res.data.price / 100;
        sessionStorage.setItem("carshop", JSON.stringify(this.carshop));
        this.$store.state.carshop = this.carshop;
        this.carshop.forEach((element) => {
          var price = parseInt(
            (element.product.shopPrice / 100) * element.quantity
          );
          this.zongjia = price + this.zongjia;
        });
      });
    },
    // 删除购物车子项
    delitem(id) {
      this.$post(this.url + "/cart/cleanCart", {
        userId: this.$store.state.user.id,
        orderItem: id,
      }).then((res) => {
        if (res.errorCode == "0") {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.getbuycar();
        }
      });
    },
    // 删除所选商品
    delselect() {
      this.select.forEach((element) => {
        this.$post(this.url + "/cart/cleanCart", {
          userId: this.$store.state.user.id,
          itemNum: element,
        }).then((res) => {
          if (res.errorCode == "0") {
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.getbuycar();
          }
        });
      });
    },
    // 清空购物车
    cleancar() {
      this.$post(this.url + "/cart/deleteCart", {
        userId: this.$store.state.user.id,
      }).then((res) => {
        if (res.errorCode == "0") {
          this.$message({
            message: "清空成功",
            type: "success",
          });
          this.getbuycar();
        }
      });
    },
    // 立即支付
    pay() {
      this.$post(this.url + "/order/checkOut", {
        userId: this.$store.state.user.id,
      }).then((res) => {
        this.$message({
          message: "正在跳转支付页面",
          type: "success",
        });
        sessionStorage.setItem("ordernum", res.data);
        this.$router.push("/zhifu");
      });
    },
    // 更新购物车
    inputChange() {
      if (this.carshop != "") {
        var orderItemList = [];
        for (let i = 0; i < this.carshop.length; i++) {
          orderItemList.push({
            id: this.carshop[i].id,
            productId: this.carshop[i].productId,
            quantity: this.carshop[i].quantity,
          });
        }
        this.$post(this.url + "/cart/updateCart", {
          userId: this.$store.state.user.id,
          orderItemList,
        }).then((res) => {
          if (res.data.errorCode == "0") {
            this.$message({
              message: "更新成功!",
              type: "success",
            });
            this.getbuycar();
          }
        });
      } else {
        this.$message.warning("当前购物车为空");
      }
    },
  },
  created() {
    this.getbuycar();
  },
};
</script>

<style scoped>
</style>